<!--
 * @Author: taosong 2289713738@qq.com
 * @Date: 2023-12-16 14:17:15
 * @LastEditors: taosong 2289713738@qq.com
 * @LastEditTime: 2024-01-03 21:10:03
 * @FilePath: \ele-h5\src\views\tabs\home\HomeView.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<script setup lang="ts">
import TheTop from './components/TheTop.vue'
import { useToggle } from '@/use/useToggle'
import { useAsync } from '@/use/useAsync'
import { featchHomePageData } from '@/api/home'
import type { IHomeInfo } from '@/types'
import SearchView from '@/views/search/searchView.vue'
import OpLoadingView from '@/components/OpLoadingView.vue'
import TheTransformer from './components/TheTransformer.vue'
import ScrollBar from './components/ScrollBar.vue'
import CountDown from './components/CountDown.vue'
import OpSwipe from '@/components/swipe/OpSwipe'
import OpSwipeItem from '@/components/swipe/OpSwipeItem'
import { PRIMARY_COLOR, TRANSPRANT } from '@/config/index.ts'
import { HOME_TABS } from './config'
import { ref } from 'vue'

const recomments = [
  {
    value: 1,
    label: '牛腩'
  },
  {
    value: 2,
    label: '色拉'
  }
]

const [isSearchViewShow, toggleSearchView] = useToggle(false)
const { data, pending } = useAsync(
  featchHomePageData,
  {
    countDown: {}
  } as IHomeInfo,
  true
)

const tabBackGroundColor = ref(TRANSPRANT)

const onTabScroll = ({ isFixed }: { isFixed: boolean }) => {
  tabBackGroundColor.value = isFixed ? '#fff' : TRANSPRANT
}
</script>

<template>
  <div class="home-page">
    <Transition name="fade">
      <SearchView v-if="isSearchViewShow" @cancel="toggleSearchView"></SearchView>
    </Transition>
    <div v-show="!isSearchViewShow">
      <TheTop @search="toggleSearchView" :recomments="recomments" />
      <OpLoadingView :loading="pending" type="loading">
        <div class="home-page__banner">
          <img v-for="item in data.banner" :key="item.imgUrl" :src="item.imgUrl" />
        </div>
        <TheTransformer :data="data.transformer" />
        <ScrollBar :data="data.scrollBarInfoList" :intervalTime="3000" :transition-time="1000" />
        <div class="home-page__activity">
          <CountDown :data="data.countDown" />
          <OpSwipe class="home-page__activity__swipe" :auto-play="3000" :loop="true">
            <OpSwipeItem v-for="item in data.activities" :key="item">
              <img :src="item" />
            </OpSwipeItem>
          </OpSwipe>
        </div>
        <VanTabs
          sticky
          offset-top="54px"
          :color="PRIMARY_COLOR"
          :background="tabBackGroundColor"
          @scroll="onTabScroll"
        >
          <VanTab v-for="item in HOME_TABS" :key="item.value" :title="item.title">
            <component :is="item.component"></component>
          </VanTab>
        </VanTabs>
      </OpLoadingView>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.home-page {
  background: var(--op-gray-bg-color);
  padding-bottom: 70px;

  &__banner {
    padding: 0 10px;
    img {
      width: 100%;
      padding-top: 10px;
      height: 125px;
      background: white;
    }
  }
  &__activity {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px;

    &__swipe {
      border-radius: 8px;
      width: 180px;
      height: 170px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
